<template>
	<cu-custom :customStyle="{backgroundColor:'white',backgroundImage:'linear-gradient(45deg, #caff005e, #ff810073)'}" :isBack="true" :paddingHeight="80">
		<template #content>
			<view style="color:#555">任务列表</view>
		</template> 
	</cu-custom> 
	
	<!-- 内容区域 -->
	<view  style=";">
		<!-- 项目标题 -->
		<view style="padding: 10px 15px 10px 15px;">
			<view style="color:#3b3b3b;font-size: 38rpx;font-weight: bold;">
				{{pageParam.project.title}}
			</view>
			
			<view style="padding:8px 0;color: #989898;font-size: 15px;font-size: 12px;display: flex;"><u-icon name="info-circle" color="#989898"></u-icon> 创建时间:{{$dayjs(project.created_at).format('YYYY-MM-DD')}}</view>
		</view>
		
		<!-- 数据统计 -->
		<view v-if="false" style="padding: 5px 0px 0 0px;">
			<view style="padding: 0 10px 10px;display: flex;align-items: center;">
				<view style="font-weight: bold;font-size: 15px;">数据统计:</view>
			</view>
			
			<view style="display: flex;flex-wrap: wrap;">
				<view v-for="(report,index) in reports" style="flex:0 0 33.33%;display: flex;flex-direction: column;align-items: center;">
					<view style="padding: 5px 10px;width:100%;">
						<view style="background-image:linear-gradient(45deg,#feffeb,#ffe6a965);text-align: center;width:100%;padding: 10px;border-radius: 5px;">
							<view style="color: #ff6a00;font-weight: bold;padding: 0 0 5px 0px;font-size: 13px;">
								{{report.title}}
							</view>
							<view style="color: #8f8f8f;font-size: 13px;">
								{{report.text}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>	
	
	<u-sticky :offsetTop="48" :customNavHeight="0" >

		<view style="padding:10px 0;" class="lin-background">
			<view @click="onAddTask" style="color:white;background-color: #ffa515;margin:0 10px;justify-content: center;align-items:center;display: flex;padding: 20px 10px;height: 30px;border: solid 1rpx #dadada;border-radius: 5px;">
				<u-icon name="plus" size="18" :customStyle="{paddingRight:'3px',color:'#eee'}"></u-icon> 添加任务活动
			</view>
			
			<view style="padding-top: 10px;display:flex;justify-content: space-between;align-items: center;">
				<u-tabs :list="list2" :current="tabIndex" @click="onClickTab" lineWidth="32" lineHeight='4'
					:activeStyle="{fontSize:'16px',fontWeight:'bold'}"
				></u-tabs>
			</view>
		</view>
	</u-sticky>
	

	<!-- 空提示 -->
	<view v-if="tasks.length == 0" style="background-color: white;padding-top: 80px;">
		<u-empty
		        mode="list"
		        :icon="absUrl('/static/empty-list.jpg')"
				text="今日没有任务哦"
		>
		</u-empty>
		
		<view style="margin: 50px;">
			<u-button> 提交新任务 </u-button>
		</view>
	</view>
	
	<!-- 兼职详情卡片 -->
	<!-- 班次时间 -->
	<view style="flex-direction: column;display: flex;margin: 0 10px 10px 10px;">
		<!-- 什么鬼 -->
		<view v-for="(task,index0) in tasks" style="margin: 5px 5px 5px 5px;background-color: #fefefe;border-radius: 20rpx;position: relative;box-shadow: 0px 0px 13px 0px #99999945;">
			<view style="border-bottom: solid 1rpx #eee;padding: 2rpx 20rpx;">
				<view style="display: flex;justify-content: space-between;margin: 15rpx 15rpx;">
					<text style="font-size: 16px;font-weight: bold;display: flex;align-items: center;">{{task.title}}</text>
					<text style="font-size: 15px;margin-right: 5px;">{{$dayjs(task.start_date).fromNow()}}</text>
					<view>顺德.乐从</view>
				</view>
				<view style="display:flex;justify-content: space-between;align-items: center;">
					<view style="display: flex;justify-content: flex-start;margin: 15rpx 15rpx;">
						<text style="margin-right: 5rpx;padding: 2rpx 8rpx;font-size: 12px;display: flex;align-items: center;color: white;background-color:#ff6a00;border-radius: 10rpx;">
							自有(已众招)
						</text>
						
						<text style="margin-right: 5rpx;padding: 2rpx 8rpx;font-size: 12px;display: flex;align-items: center;color: white;background-color:#ff6a00;border-radius: 10rpx;">
							众招项目
						</text>
					</view>
					 
					<!-- 工资 -->
					<view style="font-weight: bold;color: #f00;font-size: 13px;white-space: nowrap;justify-self: flex-end;">
						<span>{{task.jobs[0].price}}元/{{task.jobs[0].price_type}}</span>
						<span>/{{task.jobs[0].settle_type}}</span>
					</view>
				</view>
			</view>
					
			<view style="display:flex;flex-direction: column;padding:5px 10px;position: relative;">
				<view style="color:#999;padding-right: 10px;flex:1 1 0;display: flex;justify-content: space-between;align-items: center;padding:5px">
					<view style="display: flex;flex-direction: column;justify-content: center;align-items: center;">
						<view style="font-size: 18px;font-weight: bold;color: #000">18</view>
						<view style="padding: 5px 0;font-size: 12px">需求</view>
					</view>
					<view style="display: flex;flex-direction: column;justify-content: center;align-items: center;">
						<view style="font-size: 18px;font-weight: bold;color: #000">{{task.enrolls_count}}</view>
						<view style="padding: 5px 0;font-size: 12px">报名</view>
					</view>
					<view style="display: flex;flex-direction: column;justify-content: center;align-items: center;">
						<view style="font-size: 18px;font-weight: bold;color: #000">{{task.comfirm_count}}</view>
						<view style="padding: 5px 0;font-size: 12px">确认</view>
					</view>
					<view style="display: flex;flex-direction: column;justify-content: center;align-items: center;">
						<view style="font-size: 18px;font-weight: bold;color: #000">{{task.sign_up_count}}</view>
						<view style="padding: 5px 0;font-size: 12px">签到</view>
					</view>
					<view style="display: flex;flex-direction: column;justify-content: center;align-items: center;">
						<view style="font-size: 18px;font-weight: bold;color: #000">{{task.sign_down_count}}</view>
						<view style="padding: 5px 0;font-size: 12px">签退</view>
					</view>
					<view style="display: flex;flex-direction: column;justify-content: center;align-items: center;">
						<view style="font-size: 18px;font-weight: bold;color: #000">{{task.sign_down_count}}</view>
						<view style="padding: 5px 0;font-size: 12px">验收</view>
					</view>
					<view style="display: flex;flex-direction: column;justify-content: center;align-items: center;">
						<view style="font-size: 18px;font-weight: bold;color: #000">{{task.sign_down_count}}</view>
						<view style="padding: 5px 0;font-size: 12px">发薪</view>
					</view>
				</view>
				<view style="height: 1px;background-color: #902eff;width: 30%;position: absolute;bottom: 0;left: 0;"></view>
			</view>
			
<!-- 					<view>
				<jobCard :task="task"></jobCard>
			</view> -->
			
			<view  class="bottom_line" v-for="(formData,index) in task.jobs" style="display: flex;justify-content: space-between;align-items:center;line-height: 12px;padding: 0px 0px;">
				<!-- 内容区域 -->
				<view style="flex: 1 0 0%;display: flex;flex-direction: column;padding: 2px;">
					<view style="padding: 8px;display: flex;justify-content: space-between;align-items: center;flex-wrap: nowrap;">		
						<!-- 职位名称 -->
						<view style="flex: 1 1 55%;display: flex;justify-content: space-between;">
							<view style="font-size: 13px;font-weight: bold;white-space: nowrap;"><text>{{formData.name}}</text></view>
						</view>
						<!-- 人数 -->
						<span style="font-size: 12px;color: #9c9c9c;padding-left: 5px;white-space: nowrap;">1/{{formData.num}}人</span>
						
						<!-- 时间 -->
						<view style="flex:0 0 45%;text-align: right;color:#757575">
							<view style="line-height: 13px;font-size: 13px;font-weight: bold;white-space: nowrap;"><text>{{fixedTime(formData.start_time)}}-{{fixedTime(formData.end_time)}}</text></view>
						</view>
					</view>
				</view>
			</view>
			
			<view style="display: flex;justify-content: space-between;border-top: solid 0.03125rem #eee;padding: 10px 10px;">
				
					<view @click="showPromotion(task)" style="display: flex;align-items: center;padding: 5px 10px;height: 30px;background-color: #902eff;color: #ff9d00;border-radius: 10rpx;box-shadow: 0px 0px 13px 0px #902eff55;">
						<u-icon name="share-square" color="white"></u-icon>
						<span style="font-size: 24rpx;padding-left:3px;color:white">职位推广</span>
					</view>
				
				<view @click="onAction(task,index)" style="border: solid 1rpx #eee;justify-content: center;align-items:center;display: flex;padding: 5px 10px;height: 30px;border-radius: 5px;box-shadow: 0px 0px 13px 0px #99999945;">
					 <i class="iconfont icon-zuzhiguanli" style="margin: 5px;color: #ff6a00;"></i>
					 <view style="color:#ff8d01;">
						 活动管理
					</view>
				</view>
			</view>
		</view>	
	</view>
	
	<u-popup :show="showActionPopus" @close="showActionPopus=false">
		<view style="background-color: #eee;">
			<view style="background-color: white;margin-bottom: 5px;box-shadow: 0 0 4px 0 #77777744;">
				<view  @click="onViewDetails"
					class="bottom_line" style="text-align: center;margin: 0px;padding: 20px 15px;display: flex;justify-content: space-between;align-items: center;">
					<view style="flex:1 0 0;font-size: 14px;display:flex;justify-content: center;">
						<u-icon name="eye" color="#87ee00"></u-icon>
						<span style="padding-left:5px">详情预览</span>
					</view>
				</view>
			</view>
			
			<view style="background-color: white;margin-bottom: 5px;box-shadow: 0 0 4px 0 #77777744;">
				<view  @click="onAddJob"
					class="bottom_line" style="text-align: center;margin: 0px;padding: 20px 15px;display: flex;justify-content: space-between;align-items: center;">
					<view style="flex:1 0 0;font-size: 14px;display:flex;justify-content: center;">
						<u-icon name="plus" color="#ee00c3"></u-icon>
						<span style="padding-left:5px">添加岗位</span>
					</view>
				</view>
				
				<view  @click="onJobModify"
					class="bottom_line" style="text-align: center;margin: 0px;padding: 20px 15px;display: flex;justify-content: space-between;align-items: center;">
					<view style="flex:1 0 0;font-size: 14px;display:flex;justify-content: center;">
						<u-icon name="edit-pen" color="#ee9f00"></u-icon>
						<span style="padding-left:5px">活动编辑</span>
					</view>
				</view>
			</view>
			
			<view style="background-color: white;margin-bottom: 5px;box-shadow: 0 0 4px 0 #77777744;">
				<view  @click="onOrganize"
					class="bottom_line" style="text-align: center;margin: 0px;padding: 20px 15px;display: flex;justify-content: space-between;align-items: center;">
					<view style="flex:1 0 0;font-size: 14px;display:flex;justify-content: center;">
						<u-icon name="calendar" color="#008dce"></u-icon>
						<span style="padding-left:5px">组织管理</span>
					</view>
				</view>
				<view  @click="onComplete"
					class="bottom_line" style="text-align: center;margin: 0px;padding: 20px 15px;display: flex;justify-content: space-between;align-items: center;">
					<view style="flex:1 0 0;font-size: 14px;display:flex;justify-content: center;">
						<u-icon name="checkmark-circle-fill" color="#80cc4a"></u-icon>
						<span style="padding-left:5px">完结活动</span>
					</view>
				</view>
				<view  @click="onTaskCancel"
					class="bottom_line" style="text-align: center;margin: 0px;padding: 20px 15px;display: flex;justify-content: space-between;align-items: center;">
					<view style="flex:1 0 0;font-size: 14px;display:flex;justify-content: center;">
						<u-icon name="error-circle" color="#ff4507"></u-icon>
						<span style="padding-left:5px">取消活动</span>
					</view>
				</view>
			</view>
			
			<view style="background-color:white;color:red">
				<view  @click="onCancel"
					class="bottom_line" style="text-align: center;margin: 0px;padding: 20px 15px;display: flex;justify-content: space-between;align-items: center;">
					<view style="flex:1 0 0;font-size: 14px;">取消</view>
				</view>
			</view>
		</view>
	</u-popup>
	
	<u-popup :show="showAddJobPopup"  
		:title="title" 
		mode="center"
		:closeOnClickOverlay="true"
		:customStyle="{borderRadius:'5px'}"
		@close="showAddJobPopup=false"
		>
		<view style="padding: 10px;border-radius: 5px;">
			<view style="padding: 10px;text-align: center;font-size: 15px;font-weight: bold;">
				添加岗位
			</view>

			<u--form
				labelPosition="left"
				:model="addJobFormData"
				:labelWidth="140"
				ref="form1"
			>
				<u-form-item
					label="岗位名称"
					prop="userInfo.name"
					borderBottom
					ref="item1"
					
				>
					<u--input
						placeholder="岗位名称"
						border="surround"
						v-model="addJobFormData.title"
					></u--input>
				</u-form-item>
				
			</u--form>
		</view>
	</u-popup>
	
	<u-toast ref="uToast"></u-toast>
	
	<taskPromotion
		v-model:showPost="showPost" 
		v-model:showPromotionActions="showPromotionActions"
		v-model:showActions="showActions"
		:currentTask="currentTask"
	></taskPromotion>
	
</template>

<script>
	import taskPromotion from '@/components/task-promotion.vue'
	import timeTextFormat from '@/utils/mixins/time-text-format.js'
	import workData from '@/utils/data/workData.js'
	import tabbs from '@/pages/tabbs/tabbas.vue'
	
	import {LRUCache} from 'lru-cache'
	let cache = new LRUCache({max:5,ttl:5*1000})
	
	export default {
		components:{tabbs,taskPromotion},
		mixins:[workData,timeTextFormat],
		data(){
			return {
				addJobFormData:{
					title:''
				},
				showPromotionActions:false,
				showActions:false,
				showPost:false,
				currentTask:null,
				showAddJobPopup:false,
				showActionPopus:false,
				project:null,
				tasks:[],
				currentPage:0,
				tabIndex: -1,
				indexTask:0,
				list2: [
					{
						name: '今天执行',
						type:'doing'
					},
					{
						name: '未开始',
						type:'not-started'
					},
					{
						name: '待完结',
						type:'unfinished'
					}, 
					{
						name: '已完结',
						type:'finished'
					},
					{
						name: '已取消',
						type:'canceled'
					}],
			}
		},
		computed: {
			reports() {
				return [
					{
						title:'点击',
						text: this.$numeral(23320323).format('0.0a').toUpperCase()
					},
					{
						title:'报名',
						text: this.$numeral(233203).format('0.0a').toUpperCase() + '(0.13)'
					},
					{
						title:'通过',
						text: this.$numeral(233203).format('0.0a').toUpperCase() + '(0.08)'
					},
					{
						title:'签到',
						text: this.$numeral(233203).format('0.0a').toUpperCase() + '(1.0)'
					},
					{
						title:'签退',
						text: this.$numeral(233203).format('0.0a').toUpperCase() + '(1.0)'
					},
					{
						title:'验收',
						text: this.$numeral(233203).format('0.0a').toUpperCase() + '(1.0)'
					},
					{
						title:'发薪',
						text: this.$numeral(233203).format('0.0a').toUpperCase() + '(1.0)'
					},
					{
						title:'工资支出',
						text: '235487.02元'
					},
					{
						title:'代理提成',
						text: '487.02元'
					},
				]
			}
		},
		onLoad(){
			console.log('XXXXXXXXX')
			console.log(this.pageParam.project)
			this.project = this.pageParam.project
		},
		onShow()
		{  
			let that = this

			this.$nextTick(()=>{
				 that.onClickTab({index:0})	
			})
		},
		onReachBottom(){
			console.log('onReachBottom')
			
			// if(this.isNoMore && this.lastNoMoreAt )
			// {
			// 	let delta = Date.now() - this.lastNoMoreAt
				
			// 	console.log(delta)
				
			// 	if(delta < 5 * 1000) return
				
			// 	this.isNoMore = false
			// 	this.lastNoMoreAt = null
			// }
			
			this.updateList()
		},
		methods:{
			async operate(type){
				this.showActionPopus = false
				
				uni.showLoading({
					title:'正在加载'
				})
				
				let res = await this.$http.post('/manager/job/task/sign',{
					task_id:this.currentTask.id,
					type
				})
				
				//this.tasks.findIndex(item=>item.id==task_id)
				this.tasks.splice(this.indexTask,1)
				
				uni.hideLoading()
			
				cache.clear()
				
				this.updateList()
			},
			async updateList(){
				let source_id = this.pageParam.project.id

				let type = this.list2[this.tabIndex].type
				
				// uni.showLoading({
				// 	title:'正在加载'
				// })
				
				// this.$refs.uToast.show({
				// 	type:"loading",
				// 	show:"true",
				// 	message:"正在加载中",
				// 	duration:9999999
				// })
				
				this._showLoading()
				
				console.log(this.$http.defaults)
				console.log(this.LRUCache)
				let res = await this.$http.get('/manager/job/task/list/all',{
					params:{
						page:this.currentPage,
						source_id:source_id,
						type
					},
					cache: cache,
				})
				
				//uni.hideLoading()
				
				//this.$refs.uToast.hide()
				
				this.hideLoading()
				
				if(res.data.data && res.data.data.length > 0)
				{
					this.tasks.push(...res.data.data)
					this.currentPage += 1
				}else {
					// uni.showToast({
					// 	title:'没有更多了',
					// 	icon:'none',
					// 	duration:800
					// })
					
					this.showNoMore()
				}
			},
			async onClickTab(item) {
				if(this.tabIndex == item.index)  return
				
				this.tabIndex = item.index
				this.currentPage = 1 
				this.tasks = []
				await this.updateList()
			},
			onViewDetails(){
				this.showActionPopus = false
				this.pageParam.task_details =  this.currentTask
				this.pageParam.details_preview = true
				console.log(this.currentTask)
				uni.navigateTo({
					url:"/pages/job/user/job-details/job-details"
				})
			},
			onAddTask(){
				this.pageParam.task = null
				
				uni.navigateTo({
					url:"/pages/job/publish/publish-form"
				})
			},
			onAddJob(){
				this.showActionPopus = false
				this.showAddJobPopup = true
			},
			onAction(task,index){
				this.showActionPopus = true
				this.currentTask = task
				this.indexTask = index
				this.pageParam.task = task
				console.log(task)
			},
			onOrganize()
			{
				this.showActionPopus = false
				console.log(this.currentTask)
				this.pageParam.project_organize = this.currentTask
				
				uni.navigateTo({
					url:'/pages/job/publish/job-organize/job-organize'
				})
				
			},
			onJobModify(){
				this.showActionPopus = false
				this.pageParam.task = this.currentTask
				uni.navigateTo({
					url:`/pages/job/publish/publish-form?id=${this.currentTask.id}`
				})
			},
			async onComplete()
			{
				await this.operate('complete')
			},
			onTaskCancel(){
				this.operate('cancel')
			},
			onCancel(){
				this.showActionPopus = false
				
			},
			showPromotion(task) {
				this.showPromotionActions = true
				this.currentTask = task
				//this.onInvite(task)
			}
		}
	}
</script>

<style scoped>
	page {
		background-color: white; 
		/* background-image: linear-gradient(45deg,#fafae6,#fcfaed); */
	}
	
	.lin-background {
		background-color: white; 
		/* background-image: linear-gradient(45deg,#fafaeb,#fcfaed) */
	}
	
	.card-background {
		background-color: white; 
		background-image: linear-gradient(45deg,#fdfff4,#fffdf7)
	}
</style>
